<template>
  <div class="model-attr-panel">
    <a-collapse v-model="activeKey">
      <a-collapse-panel key="1" header="基础属性">
        <a-form-model
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item v-if="form.name != ''" label="名称">
            <a-input v-model="form.name" :disabled="true" />
          </a-form-model-item>
        </a-form-model>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="参数">
        <a-form-model
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item
            v-for="(item,index) in form.params"
            :key="index"
            :label="item.name"
          >
            <a-input-number v-model="item.value" :min="-100000" :max="100000" />
          </a-form-model-item>
        </a-form-model>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: ["1", "2"],
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
      form: this.$store.state.model.attrForm.default,
    };
  },
  
  watch: {
    "form.entityId"(val) {
      this.$store.dispatch("model/setAttrForm", {
        key: this.form.id,
        form: { entityId: val },
      });
    },
  },
};
</script>

<style scoped>

.model-attr-panel {
  margin: 5px;
  width: 98%;
}
</style>